<!-- company表单弹窗 -->
<form id="title-form" lay-filter="title-form" class="layui-form model-form">
	<input name="titlid" type="hidden" />
	<div class="layui-form-item">
		<label class="layui-form-label">称号名称</label>
		<div class="layui-input-block">
			<input name="ttname" placeholder="请输入称号名称" type="text" class="layui-input" maxlength="20" lay-verify="required"
			 required />
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">称号颜色</label>
		<div class="layui-input-inline" style="width: 120px;">
			<input type="text" name="titclr" value="" placeholder="请选择颜色" class="layui-input" id="titclr">
		</div>
		<div class="layui-inline" style="left: -11px;">
			<div id="color-form"></div>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">称号图片</label>
		<div class="layui-upload-drag" id="titleImg">
			<i class="layui-icon"></i>
			<p>点击上传，或将图片拖拽到此处</p>
			<div class="layui-hide" id="titleImgView">
				<hr>
				<img style="max-width: 196px" alt="上传成功后渲染" id="titleImgUrl" src="">
			</div>
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">称号类型</label>
		<div class="layui-input-block">
			<select name="tttype" id="tttype" lay-verify="required" lay-filter="type">
				<option value="-1"></option>
			</select>
		</div>
	</div>
	<div class="layui-form-item" id="role" hidden="hidden">
		<label class="layui-form-label">角色</label>
		<div class="layui-input-block">
			<select name="roleid" id="roleid" lay-filter="role" lay-verify="required">
				<option value="-1"></option>
			</select>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">获取方式</label>
		<div class="layui-input-block">
			<select name="ruleId" id="ruleId" lay-verify="required" lay-filter="rule">

			</select>
		</div>
	</div>

	<div class="layui-form-item model-form-footer">
		<button class="layui-btn layui-btn-primary" ew-event="closeDialog" type="button">取消</button>
		<button class="layui-btn" lay-filter="title-form-submit" lay-submit>保存</button>
	</div>
</form>

<script>
	layui.use(['layer', 'admin', 'form','config','upload', 'colorpicker'], function() {

		var layer = layui.layer;
		var admin = layui.admin;
		var form = layui.form;
		var config = layui.config;
		var upload = layui.upload;
		var colorpicker = layui.colorpicker;

		colorpicker.render({
			elem: '#color-form',
			color: '#1c97f5',
			done: function(color) {
				$('#titclr').val(color);
			}
		});
		
		  
		  //拖拽上传
		  upload.render({
		    elem: '#titleImg'
		    ,url: config.base_server + 'api-file/files-fdfs' //改成您自己的上传接口
		    ,done: function(res){
		      layer.msg('上传成功');
		      layui.$('#titleImgView').removeClass('layui-hide').find('img').attr('src', res.url);
		      console.log(res)
		    }
		  });
		

		// 获取所有称号类型
		layer.load(2);
		admin.req('api-user/titleType/getSelectTitleTypes', {}, function(data) {
			layer.closeAll('loading');
			if (0 == data.code) {
				$.each(data.data, function(index, item) {
					$('#tttype').append(new Option(item.tpname, item.tttpid)); //往下拉菜单里添加元素
				});
				form.render(); //菜单渲染 把内容加载进去
			} else {
				layer.msg('获取称号类型失败', {
					icon: 2,
					time: 500
				});
			}
		}, 'post');

		// 获取所有角色
		layer.load(2);
		admin.req('api-user/roles', {}, function(data) {
			layer.closeAll('loading');
			if (0 == data.code) {
				$.each(data.data, function(index, item) {
					$('#roleid').append(new Option(item.name, item.id)); //往下拉菜单里添加元素
				});
				form.render(); //菜单渲染 把内容加载进去
			} else {
				layer.msg('获取称号类型失败', {
					icon: 2,
					time: 500
				});
			}
		}, 'get');

		// 选择角色专属后显示角色列表
		form.on('select(type)', function(data) {
			var type = $("select[name=tttype]").val();
			if (type === '1') {
				$("#role").show();
			} else {
				$("select[name=roleid]").val(-1); //往下拉菜单里添加元素
				form.render(); //菜单渲染 把内容加载进去
				$("#role").hide();
			}
			if (data.value !== '1') {
				getRuleByType(0, -1);
			}
		});

		// 回显title数据
		// debugger;
		var title = admin.getTempData('title');
		if (title) {
			if (title.tttype === 1) {
				$("#role").show();
			}
			getRuleByType(title.tttype, title.roleid);
		 layui.$('#titleImgView').removeClass('layui-hide').find('img').attr('src', title.titleImgUrl);
			form.val('title-form', title);
			colorpicker.render({
				elem: '#color-form',
				color: title.titclr,
				done: function(color) {
					$('#titclr').val(color);
				}
			});
		}

		// 表单提交事件
		form.on('submit(title-form-submit)', function(data) {
			console.log($("#titleImgUrl").attr("src"))
			// debugger;
			if (data.field.tttype === '-1' || data.field.tttype === '') {
				layer.msg("请选择称号类型", {
					icon: 2,
					time: 2000
				});
				return false;
			}
			if (data.field.ruleId === '' || data.field.ruleId === '-1') {
				layer.msg("请选择称号对应的获得方式", {
					icon: 2,
					time: 2000
				});
				return false;
			}
			if($("#titleImgUrl").attr("src") === undefined || $("#titleImgUrl").attr("src") === ''){
				layer.msg("请上传称号的图片", {
					icon: 2,
					time: 2000
				});
				return false;
			}
			layer.load(2);
				data.field.titleImgUrl = $("#titleImgUrl").attr("src");
			if (data.field.titlid != null && data.field.titlid != '') {
				admin.req('api-user/title/updateTitle', JSON.stringify(data.field), function(data) {
					layer.closeAll('loading');
					if (data.code == 0) {
						layer.msg(data.msg, {
							icon: 1,
							time: 2000
						});
						admin.finishPopupCenter();
					} else {
						layer.msg(data.msg, {
							icon: 2,
							time: 2000
						});
					}
				}, 'POST');
				return false;
			} else {
				admin.req('api-user/title/addTitle', JSON.stringify(data.field), function(data) {
					layer.closeAll('loading');
					if (data.code == 0) {
						layer.msg(data.msg, {
							icon: 1,
							time: 2000
						});
						admin.finishPopupCenter();
					} else {
						layer.msg(data.msg, {
							icon: 2,
							time: 2000
						});
					}
				}, 'POST');
				return false;
			}

		});



		form.on('select(role)', function(data) {
			getRuleByType(0, -1);
		})


		function getRuleByType(typeId, roleId) {
			$('#ruleId').html("")
			if (typeId === 0) {
				var selectedId = $("#tttype option:selected").val();
			} else {
				var selectedId = typeId;
			}
			if (selectedId === -1) {
				layer.msg("请选择称号类型");
				return false;
			} else {
				if (selectedId === 1 && $("#roleid option:selected").val() === -1) {
					layer.msg("请选择角色");
					return false;
				}
				if (roleId === null) {
					roleId = -1;
				} else if (roleId === -1) {
					roleId = $("#roleid option:selected").val();
				}
				layer.load(2);
				admin.req('api-user/title/getRuleByTypeAndRoleId?typeId=' + selectedId + "&roleId=" + roleId, {}, function(data) {
					layer.closeAll('loading');
					if (data.code === 0) {
						$.each(data.data, function(index, item) {
							$('#ruleId').append(new Option(item.ttrule, item.ttruid)); //往下拉菜单里添加元素

						});
					} else {
						layer.msg('获取称号的规则失败', {
							icon: 2,
							time: 500
						});
					}
				}, 'get');
			}
			form.render();
		}
	});
</script>
